$dimensione_100: 100%;

$menu_punti_rottura: 1300px 1200px 900px 800px 700px;
$menu_punto_rottura_1: nth($menu_punti_rottura, 1);

$numero_voci_menu: 6;

$durata_animazione_bkg: 1s;

@mixin stile_testo_menu() {
	font-size: 1.4em;
	font-weight: bold;
	color: white;
}

/** sezione font custom **/
@font-face {
    font-family: 'tassebold';
    src: url('../fonts/tasse-bold-59731-webfont.eot');
    src: url('../fonts/tasse-bold-59731-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/tasse-bold-59731-webfont.woff') format('woff'),
         url('../fonts/tasse-bold-59731-webfont.ttf') format('truetype'),
         url('../fonts/tasse-bold-59731-webfont.svg#tassebold') format('svg');
    font-weight: normal;
    font-style: normal;
} 

/** Sezione animazioni CSS 3 **/
@-webkit-keyframes backgroundAnimation {
	from {background-position: 100vw 0vw;}
	to {background-position: 0px 0px;}
}

@-webkit-keyframes menuAnimation {
	0% {color: rgb(64,64,64);}
	50% {color: rgb(0,168,173);}
	100% {color: white;}
}

@-webkit-keyframes virgolaAnimation {
	from {
		margin-top: -100vw;
		-webkit-transform: rotate(180deg);
	}
	to {
		margin-top: auto;
		-webkit-transform: rotate(0deg);
	}
}

/** Sezione stile prima pagina **/
.prima_pagina {
	font-family: tassebold; 
	font-size: 1.2em;
	
	background-image: url("../images/vele.svg");
	background-size: 100% 100%;
	background-repeat:no-repeat;
	background-color: rgb(227,227,224);
	/*-webkit-animation: backgroundAnimation $durata_animazione_bkg;*/
	
	header {
		position: absolute;
		width: $dimensione_100;
		
		> img {
			width: 25%;
			min-width: 250px;
			float: left;
		}
		
		@include horizzontalUl(0px, 3px);
		.menu {
			@include stile_testo_menu();
			float: right;
			margin-top: 10px;
			color: white;
			/*-webkit-animation:menuAnimation $durata_animazione_bkg;*/
			
			@media only screen and (max-width: $menu_punto_rottura_1) {
				li:nth-child(#{$numero_voci_menu}) {
					display: none;
				}
				li:nth-child(#{$numero_voci_menu - 1}) {
					display: none;
				}
			}
			
			@for $i from 2 through $numero_voci_menu - 1 {
				@media only screen and (max-width: nth($menu_punti_rottura, $i)) {
					li:nth-child(#{$numero_voci_menu - $i}) {
						display: none;
					}
				}
			}
		}
		
		.dropDownMenu {
			@include stile_testo_menu();
			float: right;
			display: none;
			
			> img {
				margin-bottom: 0px;
			}
			
			> ul {
				border: 1px solid #909090;
				background-color: #303030;
				display: none;
				position: relative;
				
				li {
					margin-top: 3px;
				}
				
				@media only screen and (max-width: $menu_punto_rottura_1) {
					li {
						display: none;
					}
					li:nth-child(#{$numero_voci_menu}) {
						display: list-item;
					}
					li:nth-child(#{$numero_voci_menu - 1}) {
						display: list-item;
					}
				}
				@for $i from 2 through $numero_voci_menu - 1 {
					@media only screen and (max-width: nth($menu_punti_rottura, $i)) {
						li:nth-child(#{$numero_voci_menu - $i}) {
							display: list-item;
						}
					}
				}
				
			}
			
			@media only screen and (max-width: $menu_punto_rottura_1) {
				display: block;
			}
		}
		.dropDownMenu:hover ul {
			display: list-item;
		}
	}
	
	section {
		position: absolute;
		width: $dimensione_100;
		height: $dimensione_100;
		
		#table {
			display: table; 
			height: 100%;
			width: 100%;
		}

		#cell {
			display: table-cell; 
			vertical-align: middle;
		}

		#virgola {
			width: 20%;
			min-width: 160px;
			margin: 0 auto;
			position: relative;
			/*-webkit-animation: virgolaAnimation $durata_animazione_bkg;*/
			
			img {
				width: $dimensione_100;
			}
			
			span {
				position: absolute;
				text-align: center;
			}
			
			span.virgola_titolo {
				top: 10%;
				left: 18%;
				color: white;
				font-size: 3.6vw;
			}
			span.virgola_contenuto {
				top: 32%;
				left: 23%;
				color: white;
				font-size: 2.0vw;
			}
			@media only screen and (max-width: 800px) {
				span.virgola_titolo { 
					font-size: 28.8px;
				}
				span.virgola_contenuto { 
					font-size: 16px;
				}
			}
		}
	
	}
}